<template>
  <div
    :class="['category-tab', { active: isActive }]"
    @click="$emit('click', category.id)"
    draggable="true"
    @dragstart="handleDragStart"
    @dragover.prevent
    @drop="handleDrop"
  >
    <!-- 标签内容 -->
    <div v-if="!isEditing" class="tab-content">
      <span class="tab-name" @dblclick.stop="startEditing">{{ category.name }}</span>
      <div class="tab-actions">
        <button class="hide-btn" @click.stop="$emit('hide', category.id)" title="隐藏标签">
          <SvgIcon name="eye-close" width="16" height="16" />
        </button>
      </div>
    </div>

    <!-- 编辑模式 - 仅显示输入框 -->
    <div v-else class="tab-edit-mode">
      <input
        ref="editInput"
        type="text"
        v-model="editName"
        @keyup.enter="saveEdit"
        @keyup.esc="cancelEdit"
        @blur="cancelEdit"
        class="edit-input"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SvgIcon from './SvgIcon.vue'

// 组件属性
const props = defineProps({
  category: {
    type: Object,
    required: true,
  },
  isActive: {
    type: Boolean,
    default: false,
  },
})

// 事件
const emit = defineEmits(['click', 'update', 'hide', 'dragstart', 'drop'])

// 编辑相关状态
const isEditing = ref(false)
const editName = ref('')
const editInput = ref(null)

// 开始编辑
const startEditing = () => {
  editName.value = props.category.name
  isEditing.value = true

  // 在下一个事件循环中自动聚焦到输入框
  setTimeout(() => {
    if (editInput.value) {
      editInput.value.focus()
      editInput.value.select()
    }
  }, 0)
}

// 保存编辑
const saveEdit = () => {
  if (editName.value.trim() !== '') {
    // 明确阻止事件冒泡
    event?.stopPropagation?.()

    emit('update', {
      id: props.category.id,
      name: editName.value.trim(),
    })
    isEditing.value = false
  }
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
}

// 拖拽事件处理
const handleDragStart = (event) => {
  emit('dragstart', {
    event,
    categoryId: props.category.id,
  })
}

const handleDrop = (event) => {
  emit('drop', {
    event,
    categoryId: props.category.id,
  })
}
</script>

<style scoped>
.category-tab {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  margin-right: 10px;
  background-color: #f5f5f7;
  border-radius: 18px;
  font-size: 14px;
  color: #1d1d1f;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  white-space: nowrap;
  position: relative;
}

.category-tab:hover {
  background-color: #e5e5ea;
}

.category-tab.active {
  background-color: #4361ee;
  color: white;
}

.tab-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.tab-name {
  position: relative;
  cursor: text;
}

/* 双击编辑提示 */
.tab-name:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.3s;
  opacity: 0.5;
}

.category-tab:hover .tab-name:after {
  width: 100%;
}

.tab-actions {
  display: none;
  margin-left: 8px;
}

.category-tab:hover .tab-actions {
  display: flex;
}

.hide-btn {
  background: none;
  border: none;
  padding: 4px;
  margin-left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.hide-btn:hover {
  opacity: 1;
}

/* 编辑模式样式 */
.tab-edit-mode {
  display: flex;
  align-items: center;
  width: 100%;
}

.edit-input {
  width: 100%;
  height: 24px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}

.active .edit-input {
  color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
</style>
